<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<link href="css/public.css" rel="stylesheet" type="text/css" />
<link href="css/main.css" rel="stylesheet" type="text/css" />
<link href="css/list.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="js/psufool.js"></script>
<script type="text/javascript" src="js/lhgdialog/lhgcore.min.js"></script>
<script type="text/javascript" src="js/lhgdialog/lhgdialog.js"></script>
</head>

<body>
<div class="head">
	<div class="left"></div>
    <div class="mid"><span class="title">文章列表</span></div>
    <div class="right"></div>
</div>
<div class="space-2"></div>
<div class="main">
	<div class="position">
    	<ul>
        	<li><a href="javascript:;" title="添加">添加</a></li>
        	<li><a href="javascript:;" title="修改">修改</a></li>
        	<li>
				<a href="javascript:;" title="删除">删除</a>
				<ul class="hide delete">
					<li><a href="javascript:;" title="删除所选">删除所选</a></li>
					<li><a href="javascript:;" title="删除全部">删除全部</a></li>
				</ul>
			</li>
        	<li>
            	<a href="javascript:;" title="批量操作">批量操作</a>
                <ul class="hide">
					<!--<li><a href="javascript:;" title="删除所选">删除所选</a></li>
					<li><a href="javascript:;" title="删除全部">删除全部</a></li>-->
                	<li><a href="javascript:;" title="移动">移　　动</a></li>
                	<li><a href="javascript:;" title="启用">启　　用</a></li>
                	<li><a href="javascript:;" title="禁用">禁　　用</a></li>
                	<li><a href="javascript:;" title="最新">最　　新</a></li>
                	<li><a href="javascript:;" title="取消最新">取消最新</a></li>
                	<li><a href="javascript:;" title="置顶">置　　顶</a></li>
                	<li><a href="javascript:;" title="取消置顶">取消置顶</a></li>
                	<li><a href="javascript:;" title="推荐">推　　荐</a></li>
                	<li><a href="javascript:;" title="取消推荐">取消推荐</a></li>
                	<li><a href="javascript:;" title="首页显示">首页显示</a></li>
                	<li><a href="javascript:;" title="首页隐藏">首页隐藏</a></li>
              </ul>
          	</li>
      	  	<li><a href="javascript:;" title="搜索">搜索</a></li>
      	</ul>
        <div class="state">当前位置：文章管理<span class="split">>></span>文章管理<span class="split">>></span>文章列表</div>
    </div>
    <div class="space-2"></div>
    <div class="list">
    	<ul>
        	<li class="guid">
            	<ul>
                    <li class="chkBox"><input type="checkbox" name="all" id="all" /></li>
                    <li class="create-time">创建时间</li>
                    <li class="index">排序索引</li>
                    <li class="cate">所属分类</li>
                    <li class="title">文章标题</li>
                </ul>
            </li>
            <form name="listForm" id="listForm" method="post" action="">
        	<li class="item">
            	<ul>
            		<li class="chkBox"><input type="checkbox" class="checkbox" name="id[]" id="id" /></li>
                    <li class="create-time">2010-10-6</li>
                    <li class="index"><input type="text" name="oIndex[]" id="oIndex" value="1" /></li>
                    <li class="cate">联系我们</li>
                    <li class="title">关爱女性健康，远离子宫颈癌</li>
                </ul>
            </li>
        	<li class="item">
            	<ul>
            		<li class="chkBox"><input type="checkbox" class="checkbox" name="id[]" id="id" /></li>
                    <li class="create-time">2010-10-6</li>
                    <li class="index"><input type="text" name="oIndex[]" id="oIndex" value="2" /></li>
                    <li class="cate">联系我们</li>
                    <li class="title">关爱女性健康，远离子宫颈癌</li>
                </ul>
            </li>
        	<li class="item">
            	<ul>
            		<li class="chkBox"><input type="checkbox" class="checkbox" name="id[]" id="id" /></li>
                    <li class="create-time">2010-10-6</li>
                    <li class="index"><input type="text" name="oIndex[]" id="oIndex" value="3" /></li>
                    <li class="cate">联系我们</li>
                    <li class="title">关爱女性健康，远离子宫颈癌</li>
                </ul>
            </li>
        	<li class="item">
            	<ul>
            		<li class="chkBox"><input type="checkbox" class="checkbox" name="id[]" id="id" /></li>
                    <li class="create-time">2010-10-6</li>
                    <li class="index"><input type="text" name="oIndex[]" id="oIndex" value="4" /></li>
                    <li class="cate">联系我们</li>
                    <li class="title">关爱女性健康，远离子宫颈癌</li>
                </ul>
            </li>
        	<li class="item">
            	<ul>
            		<li class="chkBox"><input type="checkbox" class="checkbox" name="id[]" id="id" /></li>
                    <li class="create-time">2010-10-6</li>
                    <li class="index"><input type="text" name="oIndex[]" id="oIndex" value="5" /></li>
                    <li class="cate">联系我们</li>
                    <li class="title">关爱女性健康，远离子宫颈癌</li>
                </ul>
            </li>
        	<li class="item">
            	<ul>
            		<li class="chkBox"><input type="checkbox" class="checkbox" name="id[]" id="id" /></li>
                    <li class="create-time">2010-10-6</li>
                    <li class="index"><input type="text" name="oIndex[]" id="oIndex" value="6" /></li>
                    <li class="cate">联系我们</li>
                    <li class="title">关爱女性健康，远离子宫颈癌</li>
                </ul>
            </li>
        	<li class="item">
            	<ul>
            		<li class="chkBox"><input type="checkbox" class="checkbox" name="id[]" id="id" /></li>
                    <li class="create-time">2010-10-6</li>
                    <li class="index"><input type="text" name="oIndex[]" id="oIndex" value="7" /></li>
                    <li class="cate">联系我们</li>
                    <li class="title">关爱女性健康，远离子宫颈癌</li>
                </ul>
            </li>
        	<li class="item">
            	<ul>
            		<li class="chkBox"><input type="checkbox" class="checkbox" name="id[]" id="id" /></li>
                    <li class="create-time">2010-10-6</li>
                    <li class="index"><input type="text" name="oIndex[]" id="oIndex" value="8" /></li>
                    <li class="cate">联系我们</li>
                    <li class="title">关爱女性健康，远离子宫颈癌</li>
                </ul>
            </li>
        	<li class="item">
            	<ul>
            		<li class="chkBox"><input type="checkbox" class="checkbox" name="id[]" id="id" /></li>
                    <li class="create-time">2010-10-6</li>
                    <li class="index"><input type="text" name="oIndex[]" id="oIndex" value="9" /></li>
                    <li class="cate">联系我们</li>
                    <li class="title">关爱女性健康，远离子宫颈癌</li>
                </ul>
            </li>
        	<li class="item">
            	<ul>
            		<li class="chkBox"><input type="checkbox" class="checkbox" name="id[]" id="id" /></li>
                    <li class="create-time">2010-10-6</li>
                    <li class="index"><input type="text" name="oIndex[]" id="oIndex" value="10" /></li>
                    <li class="cate">联系我们</li>
                    <li class="title">关爱女性健康，远离子宫颈癌</li>
                </ul>
            </li>
        	<li class="item">
            	<ul>
            		<li class="chkBox"><input type="checkbox" class="checkbox" name="id[]" id="id" /></li>
                    <li class="create-time">2010-10-6</li>
                    <li class="index"><input type="text" name="oIndex[]" id="oIndex" value="11" /></li>
                    <li class="cate">联系我们</li>
                    <li class="title">关爱女性健康，远离子宫颈癌</li>
                </ul>
            </li>
        	<li class="item">
            	<ul>
            		<li class="chkBox"><input type="checkbox" class="checkbox" name="id[]" id="id" /></li>
                    <li class="create-time">2010-10-6</li>
                    <li class="index"><input type="text" name="oIndex[]" id="oIndex" value="12" /></li>
                    <li class="cate">联系我们</li>
                    <li class="title">关爱女性健康，远离子宫颈癌</li>
                </ul>
            </li>
            </form>
            <li class="page">
            	每页12条记录，共12条 <img src="images/page-first-btn.jpg" /> <img src="images/prev-btn.jpg" /> 第<input type="text" name="page" id="page" value="1" class="page" />页/20页 <img src="images/page-next-btn.jpg" /> <img src="images/page-last-btn.jpg" />
            </li>
        </ul>
    </div>
</div>
</body>
</html>
<script type="text/javascript">
$(function(){
	$(".main > .position > ul > li").bind('mouseover',menuOver).bind('mouseout',menuOut);
	$(".main > .list > ul .item").bind('mouseover',itemOver).bind('mouseout',itemOut).bind('click',itemClick);
	$(".main input[class='checkbox']").bind('click',idClick);
	$("input[name='all']").bind('click',allClick);
});

var menuOver = function(){
	$(this).addClass("cur");
	var isHaveSub = false;
	if($(this).find("ul").length>0){
		isHaveSub = true;
	}
	if(isHaveSub){
		$(this).find("ul").show();
	}
}

var menuOut = function(){
	$(this).removeClass("cur");
	var isHaveSub = false;
	if($(this).find("ul").length>0){
		isHaveSub = true;
	}
	if(isHaveSub){
		$(this).find("ul").hide();
	}
}

var itemOver = function(){
	$(this).addClass("over");
}

var itemOut = function(){
	$(this).removeClass("over");
}

var itemClick = function(){
	if($(this).find("input[class='checkbox']").attr("checked")){
		$(this).find("input[class='checkbox']").removeAttr("checked");
		$(this).removeClass("select");
	}else{
		$(this).find("input[class='checkbox']").attr("checked",true);
		$(this).addClass("select");
	}
	checkAll();
	selectMenu();
}

var idClick = function(event){
	event.stopPropagation();
	if($(this).attr("checked")){
		$(this).parents('.item').addClass("select");
	}else{
		$(this).parents('.item').removeClass("select");
	}
	checkAll();
	selectMenu();
}

var allClick = function(){
	if($(this).attr("checked")){
		$("input[class='checkbox']").attr("checked",true);
		$(".main > .list > ul .item").addClass("select");
	}else{
		$("input[class='checkbox']").removeAttr('checked');
		$(".main > .list > ul .item").removeClass("select");
	}
	selectMenu();
}

var selectedIdLength = function(){
	return $("input[class='checkbox']:checked").length;
}

var checkAll = function(){
	if(selectedIdLength()==$("input[class='checkbox']").length){
		$("input[name='all']").attr("checked",true);
	}else{
		$("input[name='all']").removeAttr('checked');
	}
}

var selectMenu = function(){
	
}
</script>